<template>
	<view class="content">
		<view class="card">
			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/yuanjiaojuxing571%402x.png" mode=""></image>
			<view class="card-canuse">
				<view class="card-tittle">可用余额</view>
				<view class="card-surplus">
					{{userInfos.usableMoney}}
					<view @tap="goTixian()">提现</view>
				</view>
				<view class="card-other">
					<view class="card-tittle">提现中</view>
					<view class="card-tittle card-dongjie">冻结金额</view>
				</view>
				<view class="card-other">
					<view class="card-others-num">1256.00</view>
					<view class="card-others-num card-dongjie">{{userInfos.freezeMoney}}</view>
				</view>
			</view>
		</view>

		<view class="mingxi">
			交易明细
			<view @tap="goMingxi()">查看全部</view>
			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
		</view>

		<view class="mingxi-list">
			<view class="mingxi-items" v-for="(item,index) in moneyList">
				<view class="mingxi-tittle">欧碧泉<a>购物</a></view>
				<view class="mingxi-bottom">
					<view class="mingxi-time">2019-05-14-09:00</view>
					<view class="mingxi-money">-90.00</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				userInfos: [],
				moneyList: [],
				pageNum:0
			}
		},
		onLoad() {

		},
		onShow() {
			this.selectInfos(666700)
			this.selectList(666700,)
		},
		onReachBottom() {
			console.log('下拉加载...')
			this.selectList(666700)
		},
		methods: {
			goMingxi() {
				uni.navigateTo({
					url: '../mine-jiaoyimingxi/mine-jiaoyimingxi'
				})
			},
			goTixian() {
				uni.navigateTo({
					url: '../mine-wallet-tixian/mine-wallet-tixian'
				})
			},
			selectInfos(userId) {
				uni.request({
					url: `https://az49.ujquan.com/store/api/profit-sharing-server/v1/wallet`,
					data: {
						'userId': userId
					},
					method: "GET",
					header: {},
					success: (res) => {
						this.userInfos = res.data.data
					}
				});
			},
			selectList(userId,pageSize,pageNum) {
				uni.request({
					url: `https://az49.ujquan.com/store/api/user-server/v1/userCapitalRecords`,
					data: {
						'userId': userId
					},
					method: "GET",
					header: {},
					success: (res) => {
						console.log(res.data.data)
						this.moneyList = res.data.data
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: rgba(255, 255, 255, 1);
	}

	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 10px;
	}

	.card {
		margin: 10px 12px;
		height: 182px;
		position: relative;
	}

	.card image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.card-canuse {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.card-tittle {
		height: 12px;
		font-size: 11px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 12px;
		padding-top: 30px;
		padding-left: 20px;
		position: absolute;
	}

	.card-surplus {
		padding: 50px 9px 0 20px;
		display: flex;
		height: 20px;
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 255, 255, 1);
		line-height: 20px;
	}

	.card-surplus view {
		width: 85px;
		height: 30px;
		border-radius: 15px;
		line-height: 30px;
		background: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		position: absolute;
		right: 12.5px;
		top: 46px;
	}

	.card-other {
		padding-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.card-dongjie {
		left: 182px;
	}

	.card-others-num {
		height: 16px;
		line-height: 16px;
		font-size: 21px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 134px;
		padding-left: 20px;
	}

	.mingxi {
		height: 60px;
		line-height: 60px;
		padding-left: 12.5px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		display: flex;
		position: relative;
	}

	.mingxi view {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		position: absolute;
		top: 1.5px;
		right: 21px;
	}

	.mingxi image {
		width: 5.1px;
		height: 10.5px;
		margin-top: 26px;
		position: absolute;
		right: 12px;
	}

	.mingxi-list {
		height: 100%;
		width: 100%;
	}

	.mingxi-items {
		height: 50px;
		position: relative;
		border-bottom: #F5F5F5 1px solid;
	}

	.mingxi-tittle {
		height: 13.5px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(102, 102, 102, 1);
		line-height: 13.5px;
		position: absolute;
		display: flex;
		top: 11px;
		left: 11.5px;
	}

	.mingxi-tittle a {
		height: 9px;
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
		line-height: 9px;
		padding-left: 7px;
		padding-top: 4px;
	}

	.mingxi-time {
		height: 12.5px;
		font-size: 11px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
		position: absolute;
		top: 31px;
		left: 11.5px;
	}

	.mingxi-bottom {
		width: 100%;
		height: 15px;
		display: flex;
		position: relative;
	}

	.mingxi-money {
		position: absolute;
		right: 12.5px;
		top: 25px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(254, 67, 56, 1);
	}
</style>
